<template>
    <div class="box">
        <div class="mask" v-if="mask" @click="hideMask">
        </div>
        <div class="big" v-if="qrcode">
            <img :src="imgSrc" alt="">
            <div class="colors">长按识别二维码关注</div>
        </div>
        <div class="userBox">
            <img src="../../images/Group 126@2x.png">
            <p class="lh16">您的好友分享了一张{{coupDetail.name}}</p>
        </div>
        <div class="cate catetop textL">
            <p class="Integral name color">{{coupDetail.name}}</p>
            <p class="desc">{{coupDetail.shareStatus|shareStatus}}</p>
            <!-- <p class="desc">数量:{{coupDetail.num}}</p> -->
            <p class="desc">&nbsp;</p>
            <div class="coupDate">
                <p class="title">优惠券有效期</p>
                <p class="content">{{coupDetail.validatyBegin}}至{{coupDetail.validatyEnd}}</p>
            </div>
        </div>
        <div class="numbutton" v-if="coupDetail.shareStatus == '00'" @click="getScanQRcode">
            立即领取
        </div>
        <!-- 注册手机号验证 -->
        <!-- <reg-phone :isShow="phoneState" @cancel="cancel" @confirm="confirmCB"></reg-phone> -->
        <div v-transfer-dom>
            <div v-if="phoneState">
                <div class="model"></div>
                <div class="phoneTxt">
                    <div class="phoneTxt_title">
                        <h3>&nbsp;</h3>
                        <h4>请填写用户名和手机号</h4>
                    </div>
                    <div class="phoneTxt_name"><input v-model="phoneTxt_name" type="text" placeholder="请输入用户名"></div>
                    <div class="phoneTxt_phone"><input maxlength="11" v-model="phoneTxt_phone" type="tel" placeholder="请输入手机号"></div>
                    <div class="phoneTxt_btn">
                        <div @click="phoneState=false">取消</div>
                        <div @click="btnPhone">确定</div>
                    </div>
                </div>
            </div>
        </div>

        <div v-transfer-dom>
            <alert v-model="alertShow" @on-hide="hideSuccess" title="提示"> {{alertContent}}</alert>
        </div>
        <div v-transfer-dom>
            <alert v-model="alerSuccShow" @on-hide="succHide" title="提示"> {{alertContent}}</alert>
        </div>
    </div>
</template>

<script>
import { Confirm, Alert, TransferDomDirective as TransferDom } from "vux";
import {
    system,
    findShareCouponInfo,
    scanQRcode,
    bindUserInfoPhone,
} from "request";
import { getOpenId, getUrlParameters } from "methods/baseinfo.js";
import {codeSrc,loginConfig} from 'pack';
import { setWXConfig } from 'src/methods/baseinfo.js'
import { restShare } from 'mixins';
export default {
    name: "VoucherShow",
    mixins:[restShare],
    data() {
        return {
            imgSrc:codeSrc(),
            msg: "",
            coupDetail: {},
            openId: "",
            alertShow: false,
            alerSuccShow: false,
            alertContent: "",
            shareCouponNo: "",
            phoneState: false,
            phoneTxt_phone: "",
            phoneTxt_name: "",
            mask: false,
            qrcode: false,
        };
    },
    directives: {
        TransferDom
    },
    components: {
        Confirm,
        Alert
    },
    mounted(){
        //设置页面像素级别
        document.documentElement.style.fontSize = window.innerWidth / 37.5 + 'px';
    },
    created() {
        var jsonStr = getUrlParameters();
        this.shareCouponNo = jsonStr.state;
        if(this.shareCouponNo){
            this.checkData();
            setWXConfig(window.location.href.split('#')[0]);
        }else{
            this.$router.push({ path: '/' });
        }
    },
    methods: {
        async checkData() {
            const openId = await getOpenId();
            this.openId = openId;
            let loginInfo = loginConfig();
            system({
                appId: loginInfo.appId,
                userId: this.openId,
                institutionNo: loginInfo.institutionNo
            })
                .then(
                    // system({ "appId":"APP2018012300004","userId":this.openId,"institutionNo":"IN20180424000045",}).then(
                    response => {
                        var obj = Object.assign({}, response.data);
                        if (response.rspCode == "0000") {
                            localStorage.setItem("token", obj.sessionId);
                            sessionStorage.setItem("colour", obj.colour);
                            sessionStorage.setItem("logourl", obj.logoPicUrl);
                            sessionStorage.setItem(
                                "institutionName",
                                obj.institutionName
                            );
                            sessionStorage.setItem("isHkb", "2");
                            this.loadData();
                        } else if (response.rspCode == "4444") {
                            this.$router.push({
                                path: "/Notfound",
                                query: {
                                    msg: "权限不足"
                                }
                            });
                        } else {
                            this.$router.push({
                                path:"/Notfound",
                                query: {msg: response.rspMsg}
                            })
                        }
                    }
                )
                .catch(error => console.log(error));
        },
        async loadData() {
            this.$vux.loading.show({
                text: "Loading"
            });
            findShareCouponInfo({ shareCouponNo: this.shareCouponNo }).then(
                    response => {
                        if (response.rspCode == "0000") {
                            this.coupDetail = response.data.couponList[0];
                            console.log(this.coupDetail);
                        }
                        this.$vux.loading.hide();
                    }
                )
                .catch(error => console.log(error));
            setTimeout(() => {
                this.$vux.loading.hide();
            }, 2000);
        },
        getScanQRcode() {
            scanQRcode({
                shareCouponNo: this.shareCouponNo,
                openId: this.openId
            })
                .then(
                    // scanQRcode({"shareCouponNo":this.shareCouponNo,"openId":this.openId}).then(
                    response => {
                        if (response.rspCode == "0000") {
                            const reCode = response.data.rspCode;
                            if (reCode == "7012") {
                                this.phoneState = true;
                            } else if (reCode == "7011") {
                                // this.alertShow = true;
                                // this.alertContent = "用户未关注公众号！";
                                this.qrcode = true;
                                this.mask = true;
                            } else if (reCode == "0000") {
                                this.alerSuccShow = true;
                                this.alertContent = response.data.message;
                            } else {
                                this.alertShow = true;
                                this.alertContent = response.data.message;
                            }
                        }
                    }
                )
                .catch(error => console.log(error));
        },
        succHide() {
            this.$router.push({
                path: "/",
                query: {}
            });
        },
        hideMask() {
            this.mask = false;
            this.qrcode = false;
        },
        btnPhone() {
            if (
                !/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9])\d{8}$/.test(
                    this.phoneTxt_phone
                )
            ) {
                Toast({
                    message: "手机号码有误，请重填",
                    duration: 1000
                });
                return false;
            }
            this.$vux.loading.show({
                text: "Loading"
            });
            bindUserInfoPhone({
                phone: this.phoneTxt_phone,
                name: this.phoneTxt_name
            })
                .then(res => {
                    if (res.rspCode == "0000") {
                        this.alertShow = true;
                        this.alertContent = "手机号绑定成功！";
                        // this.getScanQRcode();
                    } else {
                        Toast({
                            message: "绑定失败",
                            position: "middle",
                            duration: 1000
                        });
                    }
                    this.$vux.loading.hide();
                    this.phoneState = false;
                })
                .catch(
                    error => (this.phoneState = false),
                    this.$vux.loading.hide()
                );
        },
        onHide() {
            console.log("on hide");
        },
        //取消绑定
        cancel(){
            this.phoneState = false;
        },
        //绑定成功
        confirmCB(){
            this.phoneState = false;
        },
        //手机号绑定成功回调
        hideSuccess(){
            // this.getScanQRcode();
        }
    },
    filters: {
        shareStatus(value) {
            //发券途径
            return { "00": "", "01": "该优惠券已被领取" }[value];
        }
    }
};
</script>

<style lang="less" scoped>
.box {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ae0900;
    overflow-x: auto;
    background: #ae0900; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(
        #ae0900,
        #bf1107
    ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(
        #ae0900,
        #bf1107
    ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(
        #ae0900,
        #bf1107
    ); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ae0900, #bf1107); /* Standard syntax */
}
.cate {
    width: 276px;
    height: 212px;
    color: #ffffff;
    margin: 50px auto;
    background: url(../../images/bgred@2x.png) no-repeat;
    background-size: 276px 212px;
    position: relative;
}
.catetop {
    padding-top: 4px;
}
.numbutton {
    position: absolute;
    bottom: 40px;
    margin-bottom: 10px;
    margin-left: 4.5%;
    z-index: 999;
    width: 91%;
    color: #fff;
    height: 50px;
    background-color: #ff3b30;
    line-height: 50px;
    border-radius: 15px;
    text-align: center;
    font-size: 18px;
}
.userBox {
    padding-top: 30px;
}
.userBox img {
    width: 60px;
}
.userBox p {
    width: 260px;
    font-size:16px;
    color: #ffffff;
    margin: 10px auto;
}
.cate .name {
    font-size: 18px;
    width: 260px;
    margin: 55px auto 10px;
}
.cate .desc {
    text-align:center;
    font-size: 12px;
    width: 170px;
    margin: 0 auto;
    line-height: 16px;
    color: #ffc303;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.coupDate {
    position: absolute;
    bottom: 24px;
    left: 65px;
}
.coupDate .content {
    font-size: 12px;
    line-height: 16px;
}
.bottoms {
    width: 100%;
    bottom: 20px;
    padding-top: 20px;
}
.model {
    width: 100%;
    height: 100%;
    background: #999999;
    opacity: 0.7;
    position: absolute;
    left: 0;
    top: 0;
}
.phoneTxt {
    // height: 7rem;
    text-align: center;
    position: absolute;
    top: 7rem;
    left: 10%;
    background: #ffffff;
    width: 80%;
    border-radius: 1rem;
    .phoneTxt_title {
        margin: 1rem 0 0.5rem;
        h3 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }
    }
    .phoneTxt_name,
    .phoneTxt_phone {
        text-align: left;
        // height: 2rem;
        // line-height: 2rem;
        margin-left: 1rem;
    }
    input {
        border-bottom: 1px solid #d3d3d7;
        height: 3rem;
        width: 92%;
    }
    .phoneTxt_btn {
        & div {
            width: 50%;
            height: 3rem;
            line-height: 3rem;
            float: left;
            border-radius: 1px solid red;
        }
        div:nth-of-type(1) {
            color: #218bff;
        }
        div:nth-of-type(2) {
            background: #ff3b30;
            color: #ffffff;
            border-bottom-right-radius: 1rem;
        }
    }
}
.mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 8888;
}
.big {
    position: absolute;
    z-index: 9999;
    width:100%;
    height:100%;
    &>img{
        width:300px;
        margin:140px auto 0px;
    }
    .colors {
        font-size: 16px;
        color: coral;
        margin-top:20px;
    }
}
</style>
